<template>
  <el-container>
    <el-row class="nav">
      <span class="font-weight">{{$store.state.orderTypeName}}</span>
    </el-row>
    <el-divider></el-divider>
    <el-header style="display:flex;width:100%">
      <el-row class="ser_item">
        <span>工单流程：</span>
        <el-select v-model="orderTypeValue" default-first-option filterable placeholder="请选择"  @change="getTemplateFromOfStartNodeFun">
          <el-option
            v-for="(item ,index) in orderTypeList"
            :key="item.id+''"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-row>
      <el-row class="ser_item">
        <span>问题分类：</span>
          <el-cascader
            v-model="classifyValue"
            :props="{value:'id',label:'name',children:'children',filterable:true,checkStrictly:true}"
            :options="classifyList"
            ></el-cascader>
      </el-row>
      <el-row class="ser_item">
        <el-button size="mini"
                type="primary"
                class="el-button el-button--primary el-button--medium h30Btn"
                @click="handleSearch">查询</el-button>
      </el-row>
    </el-header>
    <!-- <el-row> -->
      <el-table :data="tableData"
                v-loading='loading'
                stripe
                border
                :header-cell-style="{background:'#F2F3F8'}"
                style="width: 100%">
        <el-table-column label="节点名称"
                         align="center"
                         min-width="18%">
          <template slot-scope="scope">
            <span class="label-name">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理中的工单数量"
                         align="center"
                         min-width="18%">
          <template slot-scope="scope">
            <span class="label-name">{{ scope.row.number1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="超时处理工单数"
                         align="center"
                         min-width="18%">
          <template slot-scope="scope">
            <span class="label-name">{{ scope.row.number2 }}</span>
          </template>
        </el-table-column>
      </el-table>
    <!-- </el-row> -->
    <el-row class="paging-foot">
      <el-pagination background
                     class="el-pagination page-foot-spacing el-pagination-style"
                     v-show="totalDataLength > 0"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="totalDataLength"></el-pagination>
    </el-row>
  </el-container>
</template>

<script>
import {
  getWorkOrderTypeByUserId,
} from "@/api/workOrderController";
import { getTemplateFromOfStartNode } from '@/api/workOrderTypeNode'

export default {
  data() {
    return {
      orderTypeValue:'',
      orderTypeList:[],
      classifyValue:'',
      classifyList:[],
      loading:false,
      tableData:[],
      totalDataLength:0,
      page:1,
      pageSize:10,
    }
  },
  created() {
    this.getWorkOrderTypeByUserIdFun()
    this.handleSearch()
  },
  methods:{
    // 获取工单流程
    async getWorkOrderTypeByUserIdFun () {
      let id = this.$store.state.userId
      await getWorkOrderTypeByUserId(id).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          this.orderTypeList = data.data;
          console.log(this.orderTypeList)
          this.orderTypeValue = this.orderTypeList[0].id
        }
      });
      await this.getTemplateFromOfStartNodeFun(this.orderTypeValue)

    },
    // 获取问题分类
    getTemplateFromOfStartNodeFun (id) {
      this.classifyList = []
      getTemplateFromOfStartNode(id).then(res => {
        if (res.data.retCode === 200) {
          this.classifyList = res.data.data
        }
      })
    },
    // 查询
    handleSearch() {

    },
    handleSizeChange (val) {
      this.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange (val) {
      this.page = val
      this.handleSearch()
    }
  }
  
}
</script>

<style scoped>
  .ser_item {
    justify-content: center;
    margin-right: 30px;
  }
  .el-pagination {
    float:right;
  }
</style>